<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;

		}
		.nav{
			width: 100%;
			height: 60px;
			background: pink;
			/*			
                 粘性定位：position: sticky；
                 以浏览器可视窗口为参考点（像固定定位）
                 粘性定位还占据原来的位置（像相对定位）

				 必须结合方向词使用， 才会生效， 不加方向词相当于相对定位
			    */
			position: sticky;
			top:0 ;
		}
	</style>
</head>
<body>
	 <div class="nav"></div>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>
	 <p>锄禾日当午，汗滴禾下土</p>

</body>
</html>